<style lang="scss">
  .info-container {
    min-height: 525px; 
    .list-group-title {
      padding: 5px 15px;
    }
    .list-group-text-title {
      font-size: 18px;
      padding-top: 12px;
      font-weight: bold;
    }
  }
</style>
<template>
  <div class="row info-container">
    <div class="col-md-4 avatar-container">
      <avatar></avatar>
    </div>
    <div class="col-md-8">
      <ul class="list-group">
        <li class="list-group-item list-group-title">
          <div class="list-group-item-text">
            <p class="list-group-text-title">基础资料</p>
          </div>
          <button class="btn btn-default pull-right" @click="state.modifyBaseInfoShow=true"><span class="fa fa-pencil"></span>编辑</button>
          <div class="clearfix"></div>
        </li>
        <li class="list-group-item">
          <p>昵称：{{info.base.nickName}}</p>
          <div class="clearfix"></div>
        </li>
        <li class="list-group-item">
          <p>性别：{{info.base.sex|dictionary "sex"}}</p>
          <div class="clearfix"></div>
        </li>
        <li class="list-group-item">
          <p>生日：{{info.base.birthday|moment "YYYY-MM-DD"}}</p>
          <div class="clearfix"></div>
        </li>
        <li class="list-group-item">
          <p>地址：{{info.base.address}}</p>
          <div class="clearfix"></div>
        </li>
      </ul>
    </div>
    <modify-base-info  :show.sync="state.modifyBaseInfoShow"></modify-base-info>
    <modal :show.sync="state.modifyAvatarShow" effect="zoom" title="修改头像">
      <div slot="modal-body" class="modal-body">
        <modify-avatar></modify-avatar>
      </div>
      <div slot="modal-footer"></div>
    </modal>
  </div>
</template>

<script>
/**
 * @author guocailee
 */
import Avatar from 'components/Avatar'
import ModifyBaseInfo from 'components/ModifyBaseInfo'
import modifyAvatar from 'components/ModifyAvatar'
export default {
  data() {
    let state = {
      modifyBaseInfoShow: false,
      modifyAvatarShow: false
    }
    return { state }
  },
  vuex: {
    getters: {
      info: ({ info }) => info
    }
  },
  events: {
    showModifyAvatar() {
      this.state.modifyAvatarShow = true
    },
    closeModifyAvatar() {
      this.state.modifyAvatarShow = false
    }
  },
  components: {
    Avatar,
    ModifyBaseInfo,
    modifyAvatar
  }
}
</script>